<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鹏垌村网站</title>
<style type="text/css">
body {

}
</style>
<link href="indexcss1.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="daohanglanbeijing" id="daohanglangbeijing">			
	<span class="daohanglanbeijing"></span>		
	</div>
	<span class="daohanglan"></span>
	<span class="fengexian1"></span>
	<span class="fengexian2"></span>
	<span class="wenbenbeijing0"></span>
	<span class="dong"></span>
	<style>
		.dong {
    position: absolute;
    top: 1250px;
    width: 30px;
    height: 200px;
    left: 6%;
    color: aliceblue;
    text-align: center;
    font-size: 40px;
    background: #F1E3D7;
    border-radius: 20px;
    overflow: hidden;
}
		</style>
	<span class="wenbenbeijing1"></span>
	<span class="dong1"></span>
	<span class="wenbenbeijing"></span>
	<span class="dong2"></span>
	<span class="dong3"></span>
	<span class="dong4"></span>
	<style>
	.dong2 {
    position: absolute;
    top: 1650px;
    width: 30px;
    height: 200px;
    left: 6%;
    color: aliceblue;
    text-align: center;
    font-size: 40px;
    background: #F1E3D7;
    border-radius: 20px;
    overflow: hidden;
}
	</style>
	<style>
	.dong3 {
    position: absolute;
    top: 1950px;
    width: 30px;
    height: 200px;
    left: 6%;
    color: aliceblue;
    text-align: center;
    font-size: 40px;
    background: #F1E3D7;
    border-radius: 20px;
    overflow: hidden;
}
	</style>
	<style>
	.dong4 {
    position: absolute;
    top: 1950px;
    width: 30px;
    height: 200px;
    right: 6%;
    color: aliceblue;
    text-align: center;
    font-size: 40px;
    background: #F1E3D7;
    border-radius: 20px;
    overflow: hidden;
}
	</style>
	<span class="fengexian3"></span>
<div class="carousel">
    <div class="container">
        <img src="./img/shouyetupian.jpg" alt=" "/>
        <img src="./img/shouyetupian2.jpg" alt=" "/>
		<img src="./img/shouyetupian3.jpg" alt=" "/>
    </div>
		<span class="huamianzhedang"></span>
	<div class="tebox" id="tebox">
		<te1 class="te1">
		<h class="wordhead">鹏栖之落，康乐之庄</h>
			<p>&nbsp;</p>
			<h class="word">
				<p>一个拥有悠久历史沉淀的村落，一个</p>
				<p>享有丰厚文化底蕴村庄</p>
			</h>
		</te1>
		<te2 class="te2">
		<h class="wordhead">传统古村，文化故园</h>
			<p>&nbsp;</p>
			<h class="word">
			<p>笙笙古音绕落梁，鲲鹏栖垌候一方。</p>
			<p>屋瓦庄穆尽古色，康乐祥福好一庄。</p>
			</h>
		</te2>
		<te3 class="te3">
		<h class="wordhead">修身妙地，自然氧吧</h>
			<p>&nbsp;</p>
			<h class="word">
				<p>在这里，呼吸清新空气，享受另一种</p>
				<p>乡土诗意生活</p>
			</h>
		</te3>
	</div>
	<style>
		.tebox{
			position: absolute;
			top: 150px;
			left: 3%;
			width: 20%;
		}
		</style>
    <div class="shift">
        <div class="btn left" onclick="leftShift()">&lt;</div>
        <div class="btn right" onclick="rightShift()">&gt;</div>
    </div>
    <div class="bottom"></div>
</div>
<style>
	 let carousel = document.querySelector(".carousel")
	let carousel = document.querySelector(".tebox")
        let width = getComputedStyle(carousel).width
	 carousel.querySelector(".container").style.height=width*50%;
	</style>
<script>
    let index = 0
    let imageCount = document.querySelectorAll(
        ".carousel .container img"
    ).length

    const bottom = document.querySelector(".carousel .bottom")
    for (let i = 0; i < imageCount; i++) {
 
        const indicator = document.createElement("div")
        indicator.classList.add("indicator")
        indicator.onclick = () => setIndex(i)

        bottom.append(indicator)
    }

    function createAuto() {
        return setInterval(() => {
            index++
            refresh()
        }, 4000)
    }
    let autoTimer = createAuto()

    function refresh() {
        if (index < 0) {
            index = imageCount - 1
        } else if (index >= imageCount) {
            index = 0
        }
        let carousel = document.querySelector(".carousel")
		let tebox=document.querySelector(".tebox")
		let te1=tebox.querySelector(".te1")
		let te2=tebox.querySelector(".te2")
		let te3=tebox.querySelector(".te3")
        let width = getComputedStyle(carousel).width
        width = Number(width.slice(0, -2))

        carousel.querySelector(".container").style.left =
            index * width * -1 + "px"
		if(index==0){
			te1.style.opacity='100%'
			te2.style.opacity='0%'
			te3.style.opacity='0%'
		}
		if(index==1){
			te1.style.opacity='0%'
			te2.style.opacity='100%'
			te3.style.opacity='0%'
		}
		if(index==2){
			te1.style.opacity='0%'
			te2.style.opacity='0%'
			te3.style.opacity='100%'
		}
    }

    let refreshWrapper = (func) => {
        return function (...args) {
            let result = func(...args)
            refresh()
            clearInterval(autoTimer)
            autoTimer = createAuto()
            return result
        }
    }

    let leftShift = refreshWrapper(() => {
        index--
    })
    let rightShift = refreshWrapper(() => {
        index++
    })

    let setIndex = refreshWrapper((idx) => {
        index = idx
    })

    refresh()
</script>
    <ul>
		<li20>
		<h class="word2">
		  <p>走进鲲鹏</p>
		  <p>领略福地</p>
		</h>
		</li20>
		<li21>
		<img src="./img/jianjietupian.jpg" alt=""/>
		<span class="black">村子简介</span>
		</li21>
	<li22>
		<img src="./img/tujitupian.jpg" alt=""/>
		<span class="black">图片欣赏</span>
		
	  </li22>
	<li23>
		<img src="./img/vrliulantupian.jpg" alt=""/>
	  <span class="black">VR游览</span>
	  </li23>
	</ul>
		<li24>
		<h class="word3">
		  <p>鹏垌村始建于明朝弘治年间，已有五百多年历史。目前村中保留的古屋，主要是清朝咸丰年间建成的康乐庄建筑，极具岭南特色。鹏垌村还留存着古石桥、古码头遗址、古城墙、碉楼、护城河等古迹。可谓“收历史之精魂，聚传统之奥秘”</p>
			</h>
		<h class="word4">
			<p>2019年12月24日，鹏垌村列入全国乡村治理示范村<br/>2019年6月6日，列入第五批中国传统村落<br/>2019年12月31日，入选第二批国家森林乡村名单<br/>2020年11月20日，获第六届全国文明村镇荣誉称号</p>
		</h>
		</li24>
			<h class="word5">
				<p>鹏垌村位于广西玉林市玉州区仁东镇的南部,占地6平方公里。辖区内各项服务设施齐备，道路建设完善，围绕其建设的中国南方（岭南）传统村落遗址文化公园，风景优美，人文底蕴丰厚。</p>
		</h>
	<div class="daohang1" id="daohang">
		<span class="maintext0"></span>
    <likuang>
			<span class="kuang"></span>
	</likuang>
		
  <li1>
			<span class="maintext">VR游览</span>
	  </li1>
  <li1>
			<span class="maintext">图片欣赏</span>
	  </li1>
  <li1>	
		    <span class="maintext">村子简介</span>
	  </li1>
  <li1>	
		    <span class="maintext">网站首页</span>
	  </li1>
	</div>
		<div class="biaoti">
        <img src="./img/biaoti1.png" alt=" "/>
    </div>
	<style>
		.daohang1{
			position: absolute;
			width: 100%;
			top:0px;
			right: 0;
			height: 130px;
		}
		</style>
<script>
		window.addEventListener('load', function(){
			let daohang=document.getElementById('daohang');
			let height=daohang.offsetHeight;
		})
		window.addEventListener('scroll', function(){
			let value=document.documentElement.scrollTop;
			if(value>80){
				daohang.style.position='fixed';
				daohang.style.right='0px';
				daohang.style.top='-80px';
			}
			else{
				daohang.style.position='absolute';
				daohang.style.right='0px';
				daohang.style.top='0px';
			}
			
		})
	</script>
</body>
</html>
